<template>
  <div class="flex flex-row flex-wrap items-center -mb-2">
    <template v-for="(el, i) in data" :key="i">
      <div class="flex flex-row items-center mb-2">
        <div class="w-9 h-9 rounded-full mr-4.5 flex items-center justify-center border-solid" :class="getDotClass(i)">
          <span v-if="i >= current" class="text-lg">{{ i + 1 }}</span>
          <Icon v-else type="icon-yiwancheng" class="text-color-success text-4xl" />
        </div>
        <div class="text-lg" :class="getTextClass(i)">
          {{ el.title }}
        </div>
      </div>
      <div v-if="i < data.length - 1" class="px-7 text-color-main font-semibold">
        <ArrowRightOutlined class="text-lg" :class="[i >= current ? 'text-color-secondary' : 'text-color-success']" />
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ArrowRightOutlined } from "@ant-design/icons-vue";
const props = defineProps<{
  data: { title: string }[];
  current: number;
}>();

function getDotClass(index: number) {
  if (index === props.current) {
    return "bg-color-success border-0 text-white";
  } else if (index > props.current) {
    return "bg-white border border-color-split text-color-disabled";
  }
  return "border-none";
}

function getTextClass(index: number) {
  if (index === props.current) {
    return "text-color-main font-semibold";
  } else if (index > props.current) {
    return "text-color-disabled";
  }
  return "text-color-success";
}
</script>
